<table class="table preview-table" ng-hide="showLoading">
  <thead>
    <tr>
      <th class="col-md-6">
        <span class="glyphicon glyphicon-expand pointer"
              ng-if="!expandAllInputData"
              ng-click="onExpandAllInputData(stagePreviewData)"></span>
        <span class="glyphicon glyphicon-collapse-down pointer"
              ng-if="expandAllInputData"
              ng-click="onCollapseAllInputData(stagePreviewData)"></span>
        <span translate="home.previewPane.inputData">Input Data</span>
      </th>

      <th class="col-md-6">
        <span class="glyphicon glyphicon-expand pointer"
              ng-if="!expandAllOutputData"
              ng-click="onExpandAllOutputData(stagePreviewData)"></span>
        <span class="glyphicon glyphicon-collapse-down pointer"
              ng-if="expandAllOutputData"
              ng-click="onCollapseAllOutputData(stagePreviewData)"></span>
        <span translate="home.previewPane.outputData">Output Data</span>
      </th>
    </tr>
  </thead>
  <tbody ng-switch="detailPaneConfig.uiInfo.stageType">

    <tr ng-switch-when="SOURCE">
      <td>
        <div ui-codemirror
             class="codemirror-editor"
             ng-if="rawDataConfigIndex"
             ng-model="detailPaneConfig.configuration[rawDataConfigIndex].value"
             ui-refresh="refreshCodemirror"
             ui-codemirror-opts="rawDataCodemirrorOptions">
        </div>
      </td>

      <td>

        <table class="table preview-table">
          <tbody>
          <tr ng-repeat="record in stagePreviewData.output">
            <td>
              <div class="pull-right delete-preview-record"
                   ng-if="previewMode"
                   ng-click="removeRecord(detailPaneConfig, stagePreviewData.output, record, $index)">
                <i class="fa fa-trash"></i>
              </div>

              <record-tree
                record="record"
                record-value="record.value"
                field-name="('global.form.record' | translate)+($index+1)"
                is-root="true"
                editable="previewMode"
                show-header="snapshotMode || pipelineConfig.uiInfo.previewConfig.showHeader"
                show-field-type="snapshotMode || pipelineConfig.uiInfo.previewConfig.showFieldType">
              </record-tree>
            </td>
          </tr>
          </tbody>
        </table>

      </td>
    </tr>

    <tr ng-switch-when="PROCESSOR"
        ng-repeat="inputRecord in stagePreviewData.input"
        ng-init="outputRecords = getOutputRecords(stagePreviewData.output, inputRecord)">
      <td>
        <record-tree
          record="inputRecord"
          record-value="inputRecord.value"
          diff-type="'input'"
          diff-record="outputRecords"
          diff-record-value="outputRecords[0].value"
          field-name="('global.form.record' | translate)+($index+1)"
          is-root="true"
          editable="previewMode"
          show-header="snapshotMode || pipelineConfig.uiInfo.previewConfig.showHeader"
          show-field-type="snapshotMode || pipelineConfig.uiInfo.previewConfig.showFieldType">
        </record-tree>

      </td>
      <td>
        <div ng-repeat="record in outputRecords">
          <record-tree
            record="record"
            record-value="record.value"
            diff-type="'output'"
            diff-record="inputRecord"
            diff-record-value="inputRecord.value"
            field-name="('global.form.record' | translate)+($parent.$index+1) + '-' + ('global.form.outputRecord' | translate) +  ($index + 1) + getRecordAdditionalInfo(detailPaneConfig, record, 'output')"
            is-root="true"
            editable="false"
            show-header="snapshotMode || pipelineConfig.uiInfo.previewConfig.showHeader"
            show-field-type="snapshotMode || pipelineConfig.uiInfo.previewConfig.showFieldType">
          </record-tree>


        </div>

        <div ng-repeat="record in errorsRecords = getErrorRecords(stagePreviewData.errorRecords, inputRecord)">
          <record-tree
            record="record"
            record-value="record.value"
            field-name="('global.form.record' | translate)+($parent.$index+1) + '-' + ('global.form.errorRecord' | translate) + ' ' + escapeHtml(record.header.errorMessage)"
            is-root="true"
            is-error="true"
            editable="false"
            show-header="snapshotMode || pipelineConfig.uiInfo.previewConfig.showHeader"
            show-field-type="snapshotMode || pipelineConfig.uiInfo.previewConfig.showFieldType">
          </record-tree>
        </div>

        <div ng-if="outputRecords.length === 0 && errorsRecords.length === 0">
          <label class="label label-warning">{{'home.previewPane.noOutputWarning' | translate}}</label>
        </div>

      </td>
    </tr>

    <tr ng-switch-when="TARGET"
        ng-repeat="inputRecord in stagePreviewData.input">
      <td>
        <record-tree
          record="inputRecord"
          record-value="inputRecord.value"
          field-name="('global.form.record' | translate)+($index+1)"
          is-root="true"
          editable="false"
          show-header="snapshotMode || pipelineConfig.uiInfo.previewConfig.showHeader"
          show-field-type="snapshotMode || pipelineConfig.uiInfo.previewConfig.showFieldType">
        </record-tree>
      </td>
      <td>
        <div ng-repeat="record in errorsRecords = getErrorRecords(stagePreviewData.errorRecords, inputRecord)">
          <record-tree
            record="record"
            record-value="record.value"
            field-name="('global.form.record' | translate)+($parent.$index+1) + '-' + ('global.form.errorRecord' | translate) + ' ' + escapeHtml(record.header.errorMessage)"
            is-root="true"
            is-error="true"
            editable="false"
            show-header="snapshotMode || pipelineConfig.uiInfo.previewConfig.showHeader"
            show-field-type="snapshotMode || pipelineConfig.uiInfo.previewConfig.showFieldType">
          </record-tree>
        </div>
      </td>
    </tr>

    <tr ng-if="stagePreviewData.input.length === 0 &&
                stagePreviewData.output.length === 0 &&
                stagePreviewData.errorRecords.length === 0">
      <td colspan="2" class="no-records">
        {{'home.previewPane.noRecords' | translate}}

        <div ng-if="stagePreviewData.stageErrors && stagePreviewData.stageErrors.length">
          <span translate="home.previewPane.stageErrorsWarning"
                translate-values="{stageErrorsCount: stagePreviewData.stageErrors.length}"></span>
        </div>

      </td>
    </tr>
  </tbody>

</table>
